<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>新增营养筛查——NRS2002筛查表</title>
		<!-- Bootstrap 3 CSS -->
		<link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.css">
		<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
		<style>
			body {
				background-color: #f5f7fa;
				font-family: 'Microsoft YaHei', sans-serif;
				color: #333;
				padding-bottom: 30px;
			}

			.header-container {
				background-color: #2c7cd3;
				color: white;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
				margin-bottom: 25px;
				height: 40px;
				display: flex;
				align-items: center;
			}

			.main-title {
				display: flex;
				margin: 0;
				font-size: 15px;
				font-weight: bold;
				align-items: center;
				justify-content: center;
			}

			.form-container {
				background: #fff;
				border-radius: 8px;
				box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
				margin-bottom: 30px;
				padding: 20px;
			}

			.section-title {
				font-size: 18px;
				font-weight: bold;
				color: #2c7cd3;
				border-bottom: 2px solid #e0e9f5;
				padding-bottom: 10px;
				margin-top: 0;
				margin-bottom: 20px;
			}

			.alert-important {
				border: 2px solid #e74c3c;
				background-color: #fef7f6;
				border-radius: 6px;
				padding: 15px;
				margin-bottom: 20px;
			}

			.patient-info td {
				vertical-align: middle;
				padding: 10px 15px;
			}

			.btn-check {
				margin-top: 6px;
				margin-right: 15px;
			}

			.screening-questions {
				margin-top: 25px;
			}

			.question-row {
				padding: 12px 15px;
				border-bottom: 1px solid #eef1f5;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.question-row:nth-child(odd) {
				background-color: #f9fbfe;
			}

			.question-text {
				font-size: 15px;
				padding-left: 25px;
				flex: 1;
			}

			.step-highlight {
				background-color: #e3f2fd;
				padding: 15px;
				border-left: 4px solid #2196f3;
				border-radius: 0 4px 4px 0;
				margin: 20px 0;
			}

			.btn-submit {
				background-color: #2c7cd3;
				border: none;
				padding: 10px 25px;
				font-size: 16px;
				transition: all 0.3s;
				margin-top: 15px;
			}

			.btn-submit:hover {
				background-color: #1a62b0;
				transform: translateY(-2px);
				box-shadow: 0 3px 10px rgba(44, 124, 211, 0.3);
			}

			.footer {
				text-align: center;
				color: #777;
				font-size: 13px;
				padding: 20px;
			}

			.required:after {
				content: "*";
				color: #e74c3c;
				margin-left: 4px;
			}

			@media (max-width: 768px) {
				.patient-info td {
					display: block;
					width: 100%;
				}

				.patient-info tr {
					margin-bottom: 15px;
				}

				.question-row {
					flex-direction: column;
					align-items: flex-start;
				}

				.question-text {
					padding-left: 0;
					margin-bottom: 10px;
				}
			}
		</style>

	</head>
	<body>
		<!-- 头部标题 -->
		<div class="header-container">
			<div class="container">
				<div class="row">
					<div class="col-sm-12">
						<h1 class="main-title">
							患者筛查 — NRS2002筛查表
						</h1>
					</div>
				</div>
			</div>
		</div>

		<div class="container">
			<!-- 患者基本信息 -->
			<div class="form-container">
				<div class="row">
					<div class="col-md-12">
						<h3 class="section-title">患者基本信息</h3>

						<table class="table patient-info">
							<tbody>
								<tr>
									<td><strong>姓名：</strong>张三</td>
									<td><strong>民族：</strong>汉族</td>
									<td><strong>科室：</strong>跟踪型隐形一病房</td>
									<td><strong>住院号：</strong>146878</td>
									<td><strong>床号：</strong>10-06</td>
								</tr>
								<tr>
									<td><strong>男，29岁</strong></td>
									<td><strong>身高(cm)：</strong>180</td>
									<td><strong>体重(kg)：</strong>85</td>
									<td><strong>BMI：</strong>26.2 <span class="label label-warning">超重</span></td>
									<td><strong>系数类型：</strong>轻体力活动</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>

			<!-- 判定规则 -->
			<div class="form-container">
				<div class="row">
					<div class="col-md-12">
						<h3 class="section-title">判定规则</h3>

						<div class="alert alert-info">
							<p><strong>适用对象：</strong>18-90岁，住院1天以上，次日8时前未行手术，神志清者</p>
						</div>

						<div class="form-group">
							<div class="panel panel-default">
								<div class="panel-body">
									<div class="row">
										<div class="col-md-9">
											<p><strong>结果判定：</strong></p>
											<ul>
												<li>总分值≥3分，患者存在营养风险，需要营养治疗，请通知营养科；</li>
												<li>总分值&lt;3分，患者需要每周测量，如果患者安排有重大手术，请考虑预防性的营养治疗以避免联合风险状况。</li>
											</ul>
										</div>
										<div class="col-md-3">
											<p><strong class="required">患者是否同意：</strong></p>
											<div class="radio btn-check">
												<label>
													<input type="radio" name="consent" value="yes" checked>
													是
												</label>
											</div>
											<div class="radio btn-check">
												<label>
													<input type="radio" name="consent" value="no">
													否
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 初筛问题 -->
			<div class="form-container">
				<div class="row">
					<div class="col-md-12">
						<h3 class="section-title">第一步：初筛</h3>
						<div class="alert alert-info">
							<p><strong>说明：</strong>如以下任何一个问题的回答为"是"，进行第二步筛查。</p>
						</div>

						<div class="screening-questions">
							<div class="row question-row">
								<div class="col-md-9 question-text">
									<strong>1. BMI &lt; 18.5</strong>
								</div>
								<div class="col-md-3">
									<div class="radio btn-check">
										<label>
											<input type="radio" name="q1" value="yes">
											是
										</label>
									</div>
									<div class="radio btn-check">
										<label>
											<input type="radio" name="q1" value="no" checked>
											否
										</label>
									</div>
								</div>
							</div>

							<div class="row question-row">
								<div class="col-md-9 question-text">
									<strong>2. 白蛋白 &lt; 30g/L (过去3个月有体重下降吗?)</strong>
								</div>
								<div class="col-md-3">
									<div class="radio btn-check">
										<label>
											<input type="radio" name="q2" value="yes">
											是
										</label>
									</div>
									<div class="radio btn-check">
										<label>
											<input type="radio" name="q2" value="no" checked>
											否
										</label>
									</div>
								</div>
							</div>

							<div class="row question-row">
								<div class="col-md-9 question-text">
									<strong>3. 患者在过去1周内有营养减少吗?</strong>
								</div>
								<div class="col-md-3">
									<div class="radio btn-check">
										<label>
											<input type="radio" name="q3" value="yes">
											是
										</label>
									</div>
									<div class="radio btn-check">
										<label>
											<input type="radio" name="q3" value="no" checked>
											否
										</label>
									</div>
								</div>
							</div>

							<div class="row question-row">
								<div class="col-md-9 question-text">
									<strong>4. 患者有严重疾病吗? (如ICU, 卒中，头颅外伤，腹部手术，或意识障碍)</strong>
								</div>
								<div class="col-md-3">
									<div class="radio btn-check">
										<label>
											<input type="radio" name="q4" value="yes">
											是
										</label>
									</div>
									<div class="radio btn-check">
										<label>
											<input type="radio" name="q4" value="no" checked>
											否
										</label>
									</div>
								</div>
							</div>
						</div>

						<!-- 步骤提示 -->
						<div class="alert-important">
							<div class="step-highlight">
								<h4><i class="fa fa-exclamation-circle" aria-hidden="true"></i> 操作提示</h4>
								<p>初筛中，只要有一个问题回答"是"，则进入正式筛查（第二步）</p>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 正式筛查 -->
			<div class="form-container">
				<div class="row">
					<div class="col-md-12">
						<h3 class="section-title">第二步：正式筛查</h3>

						<div class="alert alert-warning">
							<p><strong>Tip：</strong> 正式筛查才计算分值</p>
						</div>

						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">营养状态评分</h3>
							</div>
							<div class="panel-body">
								<div class="table-responsive">
									<table class="table table-bordered">
										<thead>
											<tr class="active">
												<th>指标</th>
												<th>评分标准</th>
												<th>分值</th>
												<th>选择</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>体重下降情况</td>
												<td>正常营养状态，近1-3月内体重无下降。</td>
												<td>0分</td>
												<td>
													<input type="checkbox" name="nutrition"
														onclick="nutrition_score(this, 0)">
												</td>
											</tr>
											<tr>
												<td></td>
												<td>3 个月内体重下降>5%，或前1周的食物摄入为正常食物需求的50~75%。</td>
												<td>1分</td>
												<td>
													<input type="checkbox" name="nutrition"
														onclick="nutrition_score(this, 1)">
												</td>
											</tr>
											<tr>
												<td></td>
												<td>2 个月内体重下降>5%，或前1周的食物摄入为正常食物需求25-50%</td>
												<td>2分</td>
												<td>
													<input type="checkbox" name="nutrition"
														onclick="nutrition_score(this, 2)">
												</td>
											</tr>
											<tr>
												<td></td>
												<td>1 个月内体重下降>5%(3个月内>15%)，或体重指数<18.5并全身情况受损，或前1周的食物摄入为正常食物需求的0~25%。<
														/td>
												<td>3分</td>
												<td>
													<input type="checkbox" name="nutrition"
														onclick="nutrition_score(this, 3)">
												</td>
											</tr>
											<tr class="info">
												<td><strong>食物摄入情况</strong></td>
												<td>营养需求正常</td>
												<td>0分</td>
												<td>
													<input type="checkbox" onclick="nutrition_score(this, 0)">
												</td>
											</tr>
											<tr>
												<td></td>
												<td>1周食物摄入量为正常需要量的50%-75%</td>
												<td>1分</td>
												<td>
													<input type="checkbox" onclick="food_score(this, 1)">
												</td>
											</tr>
											<tr>
												<td></td>
												<td>1周食物摄入量为正常需要量的25%-60%</td>
												<td>2分</td>
												<td>
													<input type="checkbox" onclick="food_score(this, 2)">
												</td>
											</tr>
											<tr>
												<td></td>
												<td>1周食物摄入量<正常需要量的25%< /td>
												<td>3分</td>
												<td>
													<input type="checkbox" onclick="food_score(this, 3)">
												</td>
											</tr>
											<tr class="success">
												<td><strong>严重疾病评分</strong></td>
												<td>慢性病患者因并发症而住院治疗，患者虚弱但不需要卧床，蛋白质需要量增加</td>
												<td>1分</td>
												<td>
													<input type="checkbox" onclick="disease_score(this, 1)">
												</td>
											</tr>
											<tr>
												<td></td>
												<td>严重疾病需卧床休息，蛋白质需要量增加，但多数人可通过人工营养得到恢复</td>
												<td>2分</td>
												<td>
													<input type="checkbox" onclick="disease_score(this, 2)">
												</td>
											</tr>
											<tr>
												<td></td>
												<td>严重疾病需入住ICU病房，蛋白质需要量增加且不能被人工营养支持所弥补</td>
												<td>3分</td>
												<td>
													<input type="checkbox" onclick="disease_score(this, 3)">
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">年龄评分</h3>
							</div>
							<div class="panel-body">
								<div class="table-responsive">
									<table class="table table-bordered">
										<thead>
											<tr class="active">
												<th>指标</th>
												<th>评分标准</th>
												<th>分值</th>
												<th>选择</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>年龄情况</td>
												<td>≥ 70岁</td>
												<td>1分</td>
												<td>
													<input type="checkbox" onclick="age_score(this, 1)">
												</td>
											</tr>
											<tr>
												<td></td>
												<td>
													< 70岁</td>
												<td>0分</td>
												<td>
													<input type="checkbox" onclick="age_score(this, 0)">
												</td>
											</tr>

										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 总分计算部分 -->
				<div class="row">
					<div class="col-md-6">
						<div class="well">
							<h4>评分汇总</h4>
							<div class="form-group">
								<label for="totalScore">总分计算：</label>
								<input type="text" class="form-control" value="" id="totalScore" placeholder="自动计算总分"
									readonly>
							</div>

							<div class="form-group">
								<label>营养风险判定：</label>
								<div class="radio">
									<label>
										<!-- <input type="radio" name="result" value="high"> -->
										<span class="label label-danger">存在营养风险（&ge;3分）</span> - 需要营养治疗
									</label>
								</div>
								<div class="radio">
									<label>
										<!-- <input type="radio" name="result" value="low" checked> -->
										<span class="label label-success">不存在营养风险（&lt;3分）</span> - 需要每周测量
									</label>
								</div>
							</div>
						</div>
					</div>

					<div class="col-md-6">
						<div class="panel panel-primary">
							<div class="panel-heading">
								<h3 class="panel-title">操作说明</h3>
							</div>
							<div class="panel-body">
								<p><strong>1.</strong> 根据患者的实际评估情况勾选适当的评分选项</p>
								<p><strong>2.</strong> 系统将自动计算总分</p>
								<p><strong>3.</strong> 根据总分选择相应的营养风险判定结果</p>
								<p><strong>4.</strong> 确认信息无误后提交筛查结果</p>
							</div>
						</div>
					</div>
				</div>

				<!-- 提交按钮 -->
				<div class="row">
					<div class="col-md-12 text-center">
						<button class="btn btn-lg btn-primary btn-submit">
							<i class="fa fa-check-circle" aria-hidden="true"></i> 提交筛查结果
						</button>
					</div>
				</div>
			</div>

			<!-- 页脚 -->
			<div class="footer">
				<p>© 2025 医院营养筛查系统 | NRS2002营养风险筛查工具</p>
				<p>根据患者状况准确筛查营养风险是有效治疗的重要前提</p>
			</div>
		</div>

		<!-- Bootstrap 3 JS -->

		<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
		<script src="bootstrap-3.4.1/js/bootstrap.js"></script>
		<script>
			$(document).ready(function() {
				// 输入框聚焦效果
				$('input[type="radio"], input[type="checkbox"]').focus(function() {
					$(this).closest('.btn-check, .radio, .checkbox').addClass('has-focus');
				}).blur(function() {
					$(this).closest('.btn-check, .radio, .checkbox').removeClass('has-focus');
				});

				// 提交按钮点击效果
				$('.btn-submit').click(function() {
					$(this).html('<i class="fa fa-spinner fa-spin"></i> 提交中...');
					setTimeout(function() {
						$('.btn-submit').html('<i class="fa fa-check-circle"></i> 提交筛查结果');
						alert('筛查结果已成功提交！营养科已收到通知');
					}, 2000);
				});

				// 模拟自动计算总分
				// setInterval(function() {
				// 	var randomScore = Math.floor(Math.random() * 6); // 0-5分
				// 	$('#totalScore').val(randomScore + '分');
				// }, 5000);
			});
		</script>
		<script>
			// 最终评分
			let num_score = 0;
			// 体重评分计算
			function nutrition_score(chk, val) {
				let chkresult = chk.checked
				if (chkresult) {
					num_score += val
				} else {
					num_score -= val
				}
				console.log('体重评分:', num_score)
				document.getElementById("totalScore").value = num_score + '分'
			}

			// 食物评分计算
			function food_score(chk, val) {
				let chkresult = chk.checked
				if (chkresult) {
					num_score += val
				} else {
					num_score -= val
				}
				console.log('食物评分:', num_score)
				document.getElementById("totalScore").value = num_score + '分'
			}

			// 疾病评分
			function disease_score(chk, val) {
				let chkresult = chk.checked
				if (chkresult) {
					num_score += val
				} else {
					num_score -= val
				}
				console.log('疾病评分:', num_score)
				document.getElementById("totalScore").value = num_score + '分'
			}

			// 年龄评分
			function age_score(chk, val) {
				let chkresult = chk.checked
				if (chkresult) {
					num_score += val
				} else {
					num_score -= val
				}
				console.log('年龄评分:', num_score)
				document.getElementById("totalScore").value = num_score + '分'
			}

			// 最终 评分
			console.log('最终评分:', num_score)
		</script>
	</body>
</html>